*{
    margin:0;
    padding:0;
    list-style: none;
    box-sizing: border-box;
}
ul {
    width:800px;
    margin: auto;
}

ul li{
    width:200px;
    height:200px;
    float: left;
}

ul li dl{
    width:100%;
    height:100%;
    border: 1px solid #ccc;
    position: relative;
} 

ul li dl dd{
    width:100%;
    height:160px;
    position: relative;
}

ul li dl dd img{
    width:100px;
    height:100px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
}

ul li dl dt{
    text-align: center;
}

ul li dl b{
    position: absolute;
    right:6px;
    top:6px;
    display: none;
}
ul li dl:hover b{
    display: block;
}

.mask{
    width:100%;
    height:100%;
    position: fixed;
    left:0;
    top:0;
    background: rgba(255,255,255,.3);
}

.content {
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    background: #fff;
    padding:10px;
    border: 1px solid #ccc;
}